import { WidgetItem } from '../types/index'
import { type GRID,newGRID } from './_grid/attr-grid'
import { type COLLAPSE,newCOLLAPSE } from './_collapse/attr-collapse'
import { type CARD,newCARD } from './_card/attr-card'
import { type INPUT,newINPUT } from './input/attr-input'
import { type TEXTAREA,newTEXTAREA } from './textarea/attr-textarea'
import { type NUMBER,newNUMBER } from './number/attr-number'
import { type RATE,newRATE } from './rate/attr-rate'
import { type SLIDER,newSLIDER } from './slider/attr-slider'
import { type DATEPICKER,newDATEPICKER } from './datepicker/attr-datepicker'
import { type DATERANGE,newDATERANGE } from './daterange/attr-daterange'
import { type TIMEPICKER,newTIMEPICKER } from './timepicker/attr-timepicker'
import { type TIMERANGE,newTIMERANGE } from './timerange/attr-timerange'
import { type CHECKBOX,newCHECKBOX } from './checkbox/attr-checkbox'
import { type RADIO,newRADIO } from './radio/attr-radio'
import { type SELECT,newSELECT } from './select/attr-select'
import { type BUTTON,newBUTTON } from './button/attr-button'
import { type DIVIDER,newDIVIDER } from './divider/attr-divider'
import { type IMAGE,newIMAGE } from './image/attr-image'
import { type UPLOAD,newUPLOAD } from './upload/attr-upload'
import { type SWITCH,newSWITCH } from './switch/attr-switch'

export interface ReactiveAttr {
  xs: { span: number, pull: number, push: number, offset: number, order: number },
  sm: { span: number, pull: number, push: number, offset: number, order: number },
  md: { span: number, pull: number, push: number, offset: number, order: number },
  lg: { span: number, pull: number, push: number, offset: number, order: number },
  xl: { span: number, pull: number, push: number, offset: number, order: number },
  xxl: { span: number, pull: number, push: number, offset: number, order: number },
  xxxl: { span: number, pull: number, push: number, offset: number, order: number }
}
export interface ReactiveGutter {
  xs: number, sm: number, md: number, lg: number, xl: number, xxl: number, xxxl: number
}
export type WidgetType = 'GRID'|'CARD'|'COLLAPSE'|'INPUT'|'TEXTAREA'|'NUMBER'|'RADIO'|'CHECKBOX'|'SELECT'
  |'TIMEPICKER'|'TIMERANGE'|'DATEPICKER'|'DATERANGE'|'SWITCH'|'RATE'|'SLIDER'|'IMAGE'
  |'UPLOAD'|'BUTTON'|'DIVIDER'

/**
 * 组件状态 0隐藏、1占位、2只读、3编辑、4必填。
 * 234只对输入型组件有效
 */
export type WidgetStatus = '0'|'1'|'2'|'3'|'4'

export interface LAYOUT {
  layout_status: WidgetStatus
  layout_reactive: ReactiveAttr
}
export function newLAOUT(){
  return {
    layout_status: '1',
    layout_reactive: {
      xs: { span: 0, pull: 0, push: 0, offset: 0, order: 0 }, 
      sm: { span: 0, pull: 0, push: 0, offset: 0, order: 0 }, 
      md: { span: 0, pull: 0, push: 0, offset: 0, order: 0 }, 
      lg: { span: 0, pull: 0, push: 0, offset: 0, order: 0 }, 
      xl: { span: 0, pull: 0, push: 0, offset: 0, order: 0 }, 
      xxl: { span: 0, pull: 0, push: 0, offset: 0, order: 0 }, 
      xxxl: { span: 0, pull: 0, push: 0, offset: 0, order: 0 } 
    }
  }
}

export interface FORMITEM {
  formitem_labelWidth: number
  formitem_labelAlign: 'left' | 'right'
}
export function newFORMITEM(){
  return {
    formitem_labelWidth: 100,
    formitem_labelAlign: 'left'
  }
}

export interface FIELD {
  field_code: string
  field_label: string
  field_value: string
  field_default: string
  field_format: string
}
export function newFIELD(){
  return {
    field_code: '',
    field_label: '',
    field_value: '',
    field_default: '',
    field_format: ''
  }
}

export type {
  GRID,CARD,COLLAPSE,INPUT,TEXTAREA,NUMBER,RATE,SLIDER,SWITCH,DATEPICKER,DATERANGE,TIMEPICKER,TIMERANGE,CHECKBOX,RADIO,SELECT,BUTTON,DIVIDER,IMAGE,UPLOAD
}

export function newATTR(parentItem:WidgetItem,widgetItem:WidgetItem){
  const parentGridAttr = parentItem.GRID || parentItem.COLLAPSE;
  const defaultSpan = parentGridAttr?.defaultSpan as number;
  
  const layoutAttr = {
    layout_reactive:{
      xs: { span:defaultSpan, pull: 0, push: 0, offset: 0, order: 0 },
      sm: { span:defaultSpan, pull: 0, push: 0, offset: 0, order: 0 },
      md: { span:defaultSpan, pull: 0, push: 0, offset: 0, order: 0 },
      lg: { span:defaultSpan, pull: 0, push: 0, offset: 0, order: 0 },
      xl: { span:defaultSpan, pull: 0, push: 0, offset: 0, order: 0 },
      xxl: { span:defaultSpan, pull: 0, push: 0, offset: 0, order: 0 },
      xxxl: { span:defaultSpan, pull: 0, push: 0, offset: 0, order: 0 }
    }
  }
  const formitemAttr = {
    formitem_labelAlign: parentGridAttr?.labelAlign,
    formitem_labelWidth: parentGridAttr?.labelWidth
  }

  const fieldAttr = {
    field_code: widgetItem.widgetId,
    field_label: widgetItem.label
  }

  if(widgetItem.type==='GRID'){
    widgetItem.GRID = newGRID(Object.assign(layoutAttr,{
      labelWidth: parentGridAttr?.labelWidth,
      labelAlign: parentGridAttr?.labelAlign
    }) as GRID);
  }else if(widgetItem.type==='COLLAPSE'){
    widgetItem.COLLAPSE = newCOLLAPSE(Object.assign(layoutAttr,{
      labelWidth: parentGridAttr?.labelWidth,
      labelAlign: parentGridAttr?.labelAlign
    }) as COLLAPSE );
  }else if(widgetItem.type==='CARD'){
    widgetItem.CARD = newCARD(Object.assign(layoutAttr,{}) as CARD );
  }else if(widgetItem.type==='INPUT'){
    widgetItem.INPUT = newINPUT(Object.assign(layoutAttr,formitemAttr,fieldAttr) as INPUT);
  }else if(widgetItem.type==='TEXTAREA'){
    widgetItem.TEXTAREA = newTEXTAREA(Object.assign(layoutAttr,formitemAttr,fieldAttr) as TEXTAREA);
  }else if(widgetItem.type==='NUMBER'){
    widgetItem.NUMBER = newNUMBER(Object.assign(layoutAttr,formitemAttr,fieldAttr) as NUMBER);
  }else if(widgetItem.type==='RATE'){
    widgetItem.RATE = newRATE(Object.assign(layoutAttr,formitemAttr,fieldAttr) as RATE);
  }else if(widgetItem.type==='SLIDER'){
    widgetItem.SLIDER = newSLIDER(Object.assign(layoutAttr,formitemAttr,fieldAttr) as SLIDER);
  }else if(widgetItem.type==='DATEPICKER'){
    widgetItem.DATEPICKER = newDATEPICKER(Object.assign(layoutAttr,formitemAttr,fieldAttr) as DATEPICKER);
  }else if(widgetItem.type==='DATERANGE'){
    widgetItem.DATERANGE = newDATERANGE(Object.assign(layoutAttr,formitemAttr,fieldAttr) as DATERANGE);
  }else if(widgetItem.type==='TIMEPICKER'){
    widgetItem.TIMEPICKER = newTIMEPICKER(Object.assign(layoutAttr,formitemAttr,fieldAttr) as TIMEPICKER); 
  }else if(widgetItem.type==='TIMERANGE'){
    widgetItem.TIMERANGE = newTIMERANGE(Object.assign(layoutAttr,formitemAttr,fieldAttr) as TIMERANGE);
  }else if(widgetItem.type==='CHECKBOX'){
    widgetItem.CHECKBOX = newCHECKBOX(Object.assign(layoutAttr,formitemAttr,fieldAttr) as CHECKBOX);
  }else if(widgetItem.type==='RADIO'){
    widgetItem.RADIO = newRADIO(Object.assign(layoutAttr,formitemAttr,fieldAttr) as RADIO);
  }else if(widgetItem.type==='SELECT'){
    widgetItem.SELECT = newSELECT(Object.assign(layoutAttr,formitemAttr,fieldAttr) as SELECT);
  }else if(widgetItem.type==='BUTTON'){
    widgetItem.BUTTON = newBUTTON(Object.assign(layoutAttr,{
      label: widgetItem.label
    }) as BUTTON);
  }else if(widgetItem.type==='DIVIDER'){
    widgetItem.DIVIDER = newDIVIDER(Object.assign(layoutAttr,{
      label: widgetItem.label
    }) as DIVIDER);
  }else if(widgetItem.type==='IMAGE'){
    widgetItem.IMAGE = newIMAGE(Object.assign(layoutAttr,fieldAttr) as IMAGE);
  }else if(widgetItem.type==='UPLOAD'){
    widgetItem.UPLOAD = newUPLOAD(Object.assign(layoutAttr,formitemAttr,fieldAttr) as UPLOAD);
  }else if(widgetItem.type==='SWITCH'){
    widgetItem.SWITCH = newSWITCH(Object.assign(layoutAttr,formitemAttr,fieldAttr) as SWITCH);
  }

}